今天的實作又是一個常見的網頁特效。我們直接點進下方實作範例，各位就能夠明白今天的練習內容。如同範例，常常我們進入頁面後，畫面上方是一個大banner，用來放最新消息之類的畫面。再來就是一條導覽列，讓使用者可以進入不同頁面，而下方就是網頁內容。那今天的實作就是讓使用者在瀏覽網頁內容時，向下捲動時導覽列就會被固定在上方，並跳出左邊的LOGO。

這次的程式碼很簡單，所以就直接說明。整體概念是這樣，當我們頁面往下滾，滾到超過導覽列時，就將導覽列固定，並跳出LOGO。

首先我們取得導覽列及其上邊界之Ｙ值topOfNav。當window.scrollY大於topOfNav時，就幫導覽列加fixed-nav class。要注意因為position變成fixed，所以導覽列就變的不佔任何空間，造成一旦加入fixed-nav，下方內容就會往上跳一格。為了彌補這個偏移，我們要多加paddingTop，讓滾動效果流暢。

const nav = document.querySelector('#main');
let topOfNav = nav.offsetTop;

function fixNav() {
    if (window.scrollY >= topOfNav) {
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-nav');
    } else {
        document.body.classList.remove('fixed-nav');
        document.body.style.paddingTop = 0;
    }
}

window.addEventListener('scroll', fixNav);

另一個小重點是跳出LOGO的部分，這邊要設定的是max-width而不是width。設定width的話LOGO不會消失。

li.logo {
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all 0.5s;
  font-weight: 600;
  font-size: 30px;
}

.fixed-nav li.logo {
  max-width: 500px;
}